<template>
	<view class="container">
		<view class="header-status-text" v-if="!$wechat.isWechat()" 
    :style="{paddingTop: 88+'rpx'}">
      <view class="title-top">大爆炸思维</view>
    </view>
    <view style="padding: 0 40rpx;">
      <!-- 轮播图 -->
      <view class="header-imag">
       <view class="banner">
          <view class="banner-box">
            <swiper autoplay :circular="true" style="overflow: hidden;" duration="400">
              <swiper-item>
                <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/banner.png" class="bannerImg" mode="aspectFill" style="border-radius: 20rpx;overflow: hidden;"></image>
              </swiper-item>
            </swiper>
          </view>
        </view>
      </view>
    </view>
        <!-- 精品推荐 -->
    <view class="recommend">
      <view class="curriculum" id="mui-player">
  <!--     <video 
          :src="videoUrl"
          id="myVideo" 
          ref="videoPlay"
          initial-time="1" 
          class="covered"
          direction="0"
          page-gesture="true"
          enable-play-gesture="true"
          :object-fit="objectFits"
          webkit-playsinline 
          playsinline 
          x5-playsinline
          :poster="videoImgBack"
          @fullscreenchange="OnFullscreenChange"
        >
        </video> -->
      </view>
      <view class="video-title">大爆炸思维课程介绍</view>
    </view>
      <!-- 精品推荐 -->
  <view class="Systematic-learning" v-for="(item,index) in listData" :key="item.id">
       <view class="syste-title">{{ item.title }}</view>
       <view class="lear-img-name" @click="bannerClick(item.skuiId,item.path)">
         <view class="lear-img">
           <image class="imgs" :src="item.imgUrl"></image>
          <view class="system-log">
             <image src="https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/home/system_log.png">
             </image>
             <view class="system_name">{{ item.subTitle }}</view>
           </view>
         </view>
         <view style="width: 256rpx; height: 240rpx;"></view>
         <view class="name-btn">
           <view class="btn-p1">{{ item.subTitle }}</view>
           <view class="name">{{ item.name }}</view>
           <view class="price-btn">
             <view class="price">￥{{ item.price }}</view>
             <view class="primary btn-zoom"  @click.stop="bannerClick(item.skuiId,item.path)">立即购买</view>
          </view>
         </view>
       </view>
     </view>
    <view class="app-name">大爆炸思维</view>
	</view>
</template>

<script>
  import luoButton from '../../components/botton/luo-botton.vue'
  import { $POST, $GET } from '@/utils/api.js'
  import 'mui-player/dist/mui-player.min.css'
  import MuiPlayer from 'mui-player'
	export default {
    components: { luoButton },
		data() {
			return {
        objectFits: 'cover',
        videoList: [],
        videoUrl: '', // 视频地址
        videoImgBack: '', // 视频第一帧图
        statuHeight: uni.getSystemInfoSync().statusBarHeight, // 状态栏高度
        showTop: "block",
        bgcolor: 1,
        topTitle: false,
        swipers:[], // 轮播图数据
        pathUrl:'', // 地址参数
        fromPary:{
          platform:'',
          phone:'',
          audstate: false, // 审核状态
        },
        PlayerData:{ // 视频参数
          container:'#mui-player',
          title:'课程介绍',
          src: '',
          poster: '',
        },        
        listData: [
          { 
            id: 1, title: '体验课学习', subTitle: '体验课', name: '思维建模编程课', 
            price: 9.9, skuiId: 'a368d592-3f65-b9af-04ac-3a00150f4e72', path: '/pages/product/detail',
            imgUrl: 'https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_static/curriculum/exp_log.png'  
          },
          {
            id: 2, title: '年课学习', subTitle: '年课', name: '思维建模编程课',
            price: 1668, skuiId: '4a77c1fd-bf3f-a9ab-365d-3a022c667994', path: '/pages/product/detail',
            imgUrl: "https://jinlin-airobot.oss-cn-shenzhen.aliyuncs.com/host/app_course_resource/%E7%B3%BB%E7%BB%9F%E8%AF%BE01.png"
          }
        ]
			}
		},
		onReady() {},
    onLoad(params) {
      const vm = this
      vm.gethomeData()
      vm.pathUrl = window.location.href.split('?')[1]
      if(vm.$auth.getUrlPrams("platform")) {
        let platform = params.platform.toLowerCase() // 转小写
        vm.fromPary.platform = platform
        if(vm.fromPary.platform == 'ios'){
          vm.listData[0].price = 12
          vm.listData[0].path = '/pages/home/iostrialclass'
          vm.listData[1].price = 1648
          vm.listData[1].path = '/pages/home/iosyearclass'
        }
      }
      if(vm.$auth.getUrlPrams("phonenumber")) {
        vm.fromPary.phone = vm.$auth.getUrlPrams("phonenumber")
      }
      if(vm.$auth.getUrlPrams("audstate")){
        let audsteatStr = vm.$auth.getUrlPrams("audstate").toLowerCase()
         vm.fromPary.audstate = audsteatStr === 'true' ? true : false
      }
       vm.$wechat.unseBehavior()
      Window.globalStopPlay = this.globalStopPlay
    },
    mounted() {},
		methods: {
      // 切换页面停止播放
      globalStopPlay() {
        // this.$refs.videoPlay.pause()
        const vm = this
        let mp = new MuiPlayer(vm.PlayerData)
        mp.on('ready',function(event) {})
      },
      // 全屏事件
      OnFullscreenChange(event){},
      // 首页数据
      async gethomeData() {
        const vm = this
        const res = await $POST('https://openapi.jinlinjishu.com/mall_api/Api/Page/GetPageConfig',{code:"mobile_home"})
        res.data.items.forEach(item => {
          if(item.widgetCode === 'video') {
            this.videoList =  item.parameters.list.filter(j => j)
            vm.PlayerData.src = vm.videoList[0].url
            vm.PlayerData.poster = vm.videoList[0].image
            let mp = new MuiPlayer(vm.PlayerData)
            // vm.videoUrl = vm.videoList[0].url
            // vm.videoImgBack = vm.videoList[0].image
          }
          if(item.widgetCode === 'imgSlide') {
            this.swipers = item.parameters.list.filter(x => x)
          }
        })
      },
      // 滚动事件
      onPageScroll(e) {
        if (e.scrollTop == 0 && e.scrollTop <= 8) {
              this.showTop = "block"
        			this.bgcolor = '1';
              this.topTitle = false
        		}else if (e.scrollTop > 8 && e.scrollTop <= 16) {
        			this.bgcolor = '0.8';
        		} else if (e.scrollTop > 16 && e.scrollTop <= 24) {
        			this.bgcolor = '0.6';
        		} else if (e.scrollTop > 24 && e.scrollTop <= 32) {
        			this.bgcolor = '0.4';
        		} else if (e.scrollTop > 32 && e.scrollTop <= 40) {
        			this.bgcolor = '0.2';
        		} else if (e.scrollTop > 48) {
        			this.bgcolor = '0';
              this.showTop = "none"
              this.topTitle = true
        		}
      },
      //  跳页面函数
      bannerClick(id,path) {
        const vm = this
        uni.navigateTo({
          url: path+'?skuid='+id+'&'+vm.pathUrl
        })
      }
		}
	}
</script>

<style lang="scss" scoped>
	.container {
    // height: 100vh;
    background: #ffffff;
     padding: 0 0rpx 132rpx 0rpx;
     padding-bottom: constant(safe-area-inset-bottom);  
     padding-bottom: env(safe-area-inset-bottom);
     overflow: hidden;
    image{
      width: 100%;
      height: 100%;
    }
    .header-status-text{
      width: 100%;
      .title-top{
        padding-left: 40rpx;
        height: 88rpx;
        line-height: 88rpx;
        text-align: left;
        font-size: 36rpx;
        font-weight: bold;
      }
      .Subtitle-top{
        padding: 0 40rpx;
        font-weight: bold;
        font-size: 36rpx;
        margin: 20rpx 0 32rpx 0rpx;
      }
    }
		.header-imag{
      .banner{
      	background: #fff;
      	.banner-box{
      		height: 280rpx;
      		overflow: hidden;
          border-radius: 20rpx;
      		swiper {
      			width: 100%;
      			height: 100%;
      			display: block;
            margin: auto;
      			.bannerImg {
      				display: block;
      				width: 100%;
      				height: 100%;
              // margin-left:10px;
      			}
      		}
      	}
      } 
		}
    .recommend{
      margin:auto;
      margin-top: 48rpx;
      width: 670rpx;
      height: 460rpx;
      text-align: center; 
      border-radius: 32rpx;
      box-shadow: 0px 0px 40rpx rgba(0, 0, 0, 0.08);
      .curriculum{
        width: 670rpx !important;
        height: 360rpx !important;
        border-radius: 32rpx 32rpx 0 0 !important;
        background-color: #FFFFFF;
        /deep/ .covered{
           width: 100% !important;
           height: 100% !important;
           border-radius: 32rpx 32rpx 0 0 !important;
           // object-fit: cover !important;
           -webkit-backface-visibility: hidden;
           -webkit-transform: translate3d(0, 0, 0);
         }
        // /deep/ .mini-progress{
        //    height: 6rpx !important;
        //  }
      }
      .video-title{
        font-weight: 500;
        font-size: 32rpx;
        margin-top: 25rpx;
      }
    }

    .Systematic-learning {
      margin-top: 48rpx;

      .syste-title {
        color: #262626;
        font-weight: 500;
        font-size: 32rpx;
        padding: 0 40rpx;
        padding-bottom: 56rpx;
      }

      .lear-img-name {
        width: 670rpx;
        margin: auto;
        background: #FFFFFF;
        box-shadow: 0px 0px 40px rgba(0, 0, 0, 0.08);
        border-radius: 30rpx;
        display: flex;
        position: relative;

        .lear-img {
          width: 256rpx;
          height: 272rpx;
          position: absolute;
          bottom: 0rpx;
          left: 0;

          .imgs {
            width: 100%;
            height: 100%;
            border-radius: 30rpx;
          }

          .system-log {
            width: 120rpx;
            height: 40rpx;
            position: absolute;
            top: -12rpx;
            left: 0;

            .system_name {
              font-size: 24rpx;
              color: #FFFFFF;
              position: absolute;
              top: 2rpx;
              left: 18rpx;
            }
          }
        }

        .name-btn {
          width: 384rpx;
          padding: 32rpx 16rpx 16rpx 24rpx;

          .btn-p1 {
            display: inline;
            padding: 6rpx 36rpx;
            background: #FFD8B5;
            border-radius: 22rpx;
            font-size: 24rpx;
            color: #FF800C;
          }

          .name {
            font-weight: 500;
            font-size: 32rpx;
            color: #262626;
            margin: 16rpx 0 40rpx 0;
          }

          .price-btn {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .price {
              color: #FF800C;
              font-weight: bold;
              font-size: 40rpx;
            }

            .primary {
              // width: 160rpx;
              // height: 48rpx;
              // line-height: 48rpx;
              padding: 8rpx 24rpx;
              background: #FF800C;
              text-align: center;
              color: #FFFFFF;
              font-size: 24rpx;
              border-radius: 24rpx;
            }
          }
        }
      }
    }
    
    .app-name{
      color: #EEEEEE;
      font-weight: bold;
      font-size: 36rpx;
      padding: 30rpx 0;
      text-align: center;
    }
     // 定位顶部老师的狗皮膏药
     .position-top{
        position: fixed;
        left: 0;
        right: 0;
        top: 165rpx;
        // margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
       .teacher-animation{
         animation-fill-mode: both;
         animation: teacher-animation 2s forwards 0.1s;
       }
       .begin-anima{
         animation-name: begin-anima;
         -webkit-animation-name: begin-anima;
         animation-duration: 1s;
         -webkit-animation-duration: 1s;
         animation-timing-function: ease-in-out;
         -webkit-animation-timing-function: ease-in-out;
         visibility: visible !important;
         animation-fill-mode: forwards;
         // animation: begin-anima 2s forwards 0.1s;
       }
       @keyframes teacher-animation {
          0% { 
            -webkit-transform: translate(0);
            -moz-transform: translate(0);
            -ms-transform: translate(0);
            transform: translate(0);
            opacity: 1;
            }
          100% { 
            -webkit-transform: translate(120%);
            -moz-transform: translate(120%);
            -ms-transform: translate(120%);
            transform: translate(120%);
            opacity: 0;
          }
        }
        @keyframes begin-anima {
           0% { 
             -webkit-transform: translateX(100%);
             -moz-transform: translateX(100%);
             -ms-transform: translateX(100%);
             transform: translateX(100%);
             opacity: 0;
             }
           100% { 
             -webkit-transform: translateX(0);
             -moz-transform: translateX(0);
             -ms-transform: translateX(0);
             transform: translateX(0);
             opacity: 1;
             }
         }
       .animation-circle{
         width: 80rpx;
         height: 80rpx;
         background: rgba(255, 255, 255, 0.4);
         border-radius: 38rpx 0px 0px 38rpx;
         z-index: 99;
         display: flex;
         align-items: center;
         .img-box{
           width: 72rpx;
           height: 72rpx;
           margin-left: 5rpx;
         }
       }
     }
     
     .gif-img{
       width: 100%;
       height: 300rpx;
     }
     
     
     
	}
</style>
